<template>
  <view class="flex justify-center align-center" :style="{ width: `${width}px` }">
    <video
      :id="`video${videoId}`"
      ref="`video${videoId}`"
      class="flex justify-center align-center"
      :style="{ height: `${height}px`, width: `${width}px` }"
      :src="src"
      :controls="false"
      :show-play-btn="false"
      :enable-progress-gesture="false"
      :object-fit="videoFit"
      :muted="!initialize || !play"
      loop
      @play="continuePlay"
      @timeupdate="timeupdate"
    />

    <!-- <view class="position-absolute" v-if="!play">
			<text class="icon">&#xe60f;</text>
		</view> -->

    <!-- 上阴影 -->
    <view class="video-top" />

    <!-- 下阴影 -->
    <view class="video-bottom" />
  </view>
</template>

<script>
  export default {
    props: {
      videoId: {
        type: Number,
        default: 0,
      },
      src: {
        type: String,
        default: '',
      },
      play: {
        type: Boolean,
        default: false,
      },
      height: {
        type: Number,
        default: 0,
      },
      width: {
        type: Number,
        default: 0,
      },

      objectFit: {
        type: String,
        default: 'cover',
      },
      coverUrl: {
        //视频封面的图片
        type: String,
        default: '',
      },
      initialTime: {
        type: Number,
        default: 0,
      },
      gDuration: {
        type: Number,
        default: 999,
      },
    },
    data() {
      return {
        videoFit: 'cover', // 优化HBuilder展示bug
        time: 0, // 时间类
        duration: 0, // 视频时长
        OpenCover: true, // 是否开启封面
        initialize: false, // 初始化
        videoTimer: null, // 计时器
      };
    },
    mounted() {
      this.videoFit = this.objectFit;

      // #ifdef APP-PLUS
      let sys = uni.getSystemInfoSync();
      if (sys.platform === 'ios') {
        if (this.objectFit === 'cover') {
          this.videoFit = 'fill';
        }
      }

      // #endif
      let video = `video${this.videoId}`;
      this.videoContext = uni.createVideoContext(video, this);
      setTimeout(() => {
        this.videoContext.play();
      }, 10);
    },
    methods: {
      continuePlay() {
        if (!this.initialize) {
          setTimeout(() => {
            this.initialize = true;
            this.videoPlay();
          }, 100);
        }
      },
      timeupdate(event) {},
      videoPlay() {
        if (this.videoTimer) {
          clearTimeout(this.videoTimer);
        }
        this.videoTimer = setTimeout(() => {
          if (this.play) {
            this.videoContext.play();
            this.OpenCover = false;
          } else {
            this.videoContext.pause();
          }
        });
      },
    },
    watch: {
      //防抖 防止视频播放暂停太快
      play: function (newVal, oldVal) {
        if (this.initialize) this.videoPlay();
      },

      gDuration: {
        immediate: true,
        handler(newVal, oldVal) {
          this.duration = newVal;
        },
      },
    },
    computed: {
      barWidth() {
        let width = (this.time / this.duration) * parseInt(this.width);
        return `${width}px`;
      },
    },
  };
</script>
<style scoped>

  	.icon{
  		opacity: 0.6;
  		font-size: 120rpx;
  		color: #fff;
  	}

  .icon-spin{
  	//#ifndef APP-PLUS-NVUE
  	animation: spin 1.5s infinite linear;
  	//#endif
  }

  .video-top{
  	position: absolute;
  	top:0;
  	background-image: linear-gradient(to top , rgba(0,0,0,0) , rgba(0,0,0,0.4));
  	width: 750rpx;
  	height: 300rpx;
  }

  .video-bottom{
  	position: absolute;
  	bottom: 0;
  	background-image: linear-gradient(to top , rgba(0,0,0,0.4) , rgba(0,0,0,0));
  	width: 750rpx;
  	height: 300rpx;
  }

  .slider-view{
  	position: absolute;
  	left: 0;
  	bottom: 30px;
  	width: 750rpx;
  }

  .progressBar{
  	border-radius: 2rpx;
  	height: 4rpx;
  	background-color: rgba(255,255,255,0.3);
  	z-index: 999999;
  	position: absolute;
  	left: 0;
  	bottom: 0;
  	//#ifndef APP-PLUS-NVUE
  	animation: flicker 4s linear infinite;
  	animation-direction:alternate;
  	//#endif
  }

  /* #ifndef APP-PLUS-NVUE */
  @keyframes flicker {
  	0% { box-shadow:0 0 0 #FFFFFF; }
  	 /** 暂停效果 */
  	10% { box-shadow:0 0 2upx #FFFFFF; }
  	50% { box-shadow:0 0 10upx #FFFFFF; }
  	60% { box-shadow:0 0 12upx #FFFFFF; }
  	90% { box-shadow:0 0 18upx #FFFFFF; }
  	100% { box-shadow:0 0 20upx #FFFFFF; }
  }

  @keyframes spin {
  	0% {
  		-webkit-transform: rotate(0);
  		transform: rotate(0);
  	}

  	100% {
  		-webkit-transform: rotate(359deg);
  		transform: rotate(359deg);
  	}
  }
  /* #endif */
</style>
